/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

// kangkai alert

import React, {Component} from 'react';
import {Alert, Button, AppRegistry, Platform, TextInput, StyleSheet, Image, Text, View} from 'react-native';


/**
 * ======================================================================
 * Hello World
 * ======================================================================
 */
// export default class HelloWorldApp extends Component {
//   render() {
//     return (
//       <View>
//         <Text>Hello world!</Text>
//       </View>
//     );
//   }
// }

/**
 * ======================================================================
 * Props属性，用于定义组建的各种参数
 * ======================================================================
 */

// // Props 属性
// // 下面source和style都是属性
// export default class Bananas extends Component {
//   render() {
//     let pic = {
//       url: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
//     };

//     return (
//       // source控制现实图片的地址，style控制图片尺寸
//       // {pic}外层有括号，使用{}将pic变量嵌入到JSX语句中，括号的意思是 括号内部是一个js变量或者表达式，需要执行后取值
//       // 可以将任意合法的js表达式嵌入到jsx语句中
//       <Image source = {pic} style = {{width: 193, height: 110}}></Image>
//     );
//   }
// }

/**
 * ======================================================================
 * 创建自定义的Props
 * ======================================================================
 */
// 创建一个Greeting组建，组建里面包含一个name属性
// class Greeting extends Component {
//   render() {
//     return (
//       <View style={{alignItems: 'center'}}>
//         <Text>Hello {this.props.name}!</Text>
//       </View>
//     );
//   }
// }

// export default class LotsOfFreetings extends Component {
//   render() {
//     return (
//       <View>
//         <Greeting name='Rexxar'></Greeting>
//         <Greeting name='Jaina'></Greeting>
//         <Greeting name='Valeera'></Greeting>
//       </View>
//     );
//   }
// }

/**
 * 使用两种数据来控制一个组建：Props和State
 * Props是在父组建中指定，一经指定，在组建的整个生命周期内就不再改变
 * State改变组建状态或者数据
 * 
 * State
 *    1、一切界面的变化都是 状态state变化
 *    2、state的修改必须通过setState
 *      2.1、this.state.likes = 100   //这样的需钙方法是无效的
 *      2.2、setState是一个merge合并操作，只修改指定属性，不影响其他属性
 *      2.3、setState是异步操作，修改不会马上生效
 */

 /**
 * ======================================================================
 * 控制组建的状态
 * ======================================================================
 */

//  class Blink extends Component {
//    // 在constructor方法中初始化state（ES6），在需要修改的地方调用setState方法
//    constructor(props) {
//      super(props);
//      this.state = {showText: true};

//      // 每1000ms对showtext做一次取反操作
//      setInterval(() => {
//        this.setState(previousState => {
//          return { showText: !previousState.showText };
//        });
//      }, 1000);
//    }

//    render() {
//      // 根据当前showstate值来决定是不是现实text内容
//      let display = this.state.showText ? this.props.text : '';
//      return (
//        <Text>{display}</Text>
//      );
//    }
//  }

//  export default class BlinkApp extends Component {
//    render() {
//      return (
//        <View>
//          <Blink text = 'I love to blink' />
//          <Blink text = 'Yes blinking is so great' />
//          <Blink text = 'Why did they ever take this out of HTML' />
//          <Blink text = 'Look at me look at me look at me' />
//        </View>
//      );
//    }
//  }

/**
 * ======================================================================
 * 自定义组建的样式
 * ======================================================================
 */
// export default class LotsOfStyles extends Component {
//   render() {
//     return (
//       <View style = {{alignItems : "center"}}>
//         <Text style = {styles.red}>just red</Text>
//         <Text style = {styles.bigBlue}>just bigBlue</Text>
//         <Text style = {[styles.bigBlue, styles.red]}>bigblue then red</Text>
//         <Text style = {[styles.red, styles.bigBlue]}>red, then bigblue</Text>
//       </View>
//     );
//   }
// }

// // 使用StyleSheet.create 来集中控制自定义组建的样式
// const styles = StyleSheet.create({
//   bigBlue: {
//     color: 'blue',
//     fontWeight: 'bold',
//     fontSize: 30,
//   },

//   red: {
//     color: 'red',
//   },
// });

/**
 * ======================================================================
 * 指定宽高
 * ======================================================================
 */
//  export default class FixedDimensionBasics extends Component {
//    render() {
//      return (
//        <View>
//          <View style = {{width: 50, height: 50, backgroundColor: 'powderblue'}}></View>
//          <View style = {{width: 100, height: 100, backgroundColor: 'skyblue'}}></View>
//          <View style = {{width: 150, height: 150, backgroundColor: 'steelblue'}}></View>
//        </View>
//      );
//    }
//  }

/**
 * ======================================================================
 * 弹性Flex宽高
 * ======================================================================
 */
//  export default class FlexDimensionBasics extends Component {
//    render () {
//      return (
//        <View style = {{flex: 1}}>
//         <View style = {{flex: 1, backgroundColor: 'powderblue'}}/>
//         <View style = {{flex: 2, backgroundColor: 'skyblue'}} />
//         <View style = {{flex: 3, backgroundColor: 'steelblue'}}/>
//        </View>
//      );
//    }
//  }

/**
 * ======================================================================
 * 使用flexbox布局
 * ======================================================================
 */
// RN中使用flexbox来指定某个组建的子元素布局，flexbox可以在不同的屏幕尺寸上提供一致的布局

/**
 * ======================================================================
 * Flex Direction
 * ======================================================================
 */
// 在组建的style中指定flexDirection可以决定布局的主轴，规定了子元素的排列方向，默认是数轴的方向

// export default class FlexDirectionBasics extends Component {
//   render() {
//     return (
//       // flexDirectioin: column纵向，row横向
//       // justifycontent: 子元素沿主轴的排列方式
//       //    flex-start: 主轴最开始顺序排列
//       //    center: 主轴中间顺序排列
//       //    flex-end: 主轴末端顺序排列
//       //    space-around: 
//       //    space-between: 
//       //    space-evenly:
//       // alignitems: 决定子元素沿次轴的排列方式
//       //    flex-start:
//       //    flex-end:
//       //    center:
//       //    stretch:  子元素在次轴方向上不能有固定尺寸，否则不生效
//       <View style = {{
//         flex:1, 
//         flexDirection: 'column', // 默认排列方式
//         justifyContent: 'center',
//         alignItems: 'center'
//       }}>
//         <View style = {{width:50, height:50, backgroundColor: 'powderblue'}}/>
//         <View style = {{width:50, height:50, backgroundColor: 'skyblue'}}/>
//         <View style = {{width:50, height:50, backgroundColor: 'steelblue'}}/>
//       </View>
//     );
//   }
// }

/**
 * ======================================================================
 * 处理文本输入
 * ======================================================================
 */
// TextInput允许用户输入的基础组建，其onChangeText属性接受一个函数，该函数在文本变化的时候会调用
// onSubmitEditing属性在软键盘点按提交的时候会调用
// export default class PizzTranslator extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {text: ''}
//   }

//   render() {
//     return (
//       <View style = {{padding: 10}}>
//         <TextInput 
//           style = {{height: 40, top: 40}} 
//           placeholder = 'Type here too translate!'
//           onChangeText = {(text) => this.setState({text})}
//         />

//         <Text style = {{padding: 10, fontSize: 42, top: 100}}>
//           {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
//         </Text>
//       </View>
//     );
//   }
// }

/**
 * ======================================================================
 * 按钮
 * ======================================================================
 */
// export default class ButtonBasics extends Component {
//   _onPessButton() {
//     Alert.alert('You tapped the button')
//   }

//   render() {
//     return (
//       <View style = {styles.containter}>
//         <View style = {styles.buttonContainter}>
//           <Button onPress = {this._onPessButton} title = 'Press me' color = '#841584'/>
//         </View>

//         <View style = {styles.alertnativeLayoutButtonContainer}>
//           <Button onPress = {this._onPessButton} title = 'This looks great' ></Button>
//           <Button onPress = {this._onPessButton} title = 'OK' color = '#841584'></Button>
//         </View>
//       </View>
//     );
//   }
  
// }

// const styles = StyleSheet.create ({
//   containter: {
//     flex: 1,
//     justifyContent: 'center'
//   },

//   buttonContainter: {
//     margin: 20
//   },

//   alertnativeLayoutButtonContainer: {
//     margin: 20,
//     flexDirection: 'row',
//     justifyContent: 'space-between'
//   }
// })

/**
 * ======================================================================
 * Touchable系列组建
 * ======================================================================
 */
// 改组建的样式是固定的，使用TouchableOpacity或者TouchableNativeFeedbak来定制
// 视觉反馈：
//    TouchableHighlight:按下时候会变暗
//    TouchableNativeFeedback: 安卓，按下水滴效果
//    TouchableOpacity: 按下降低透明度
//    TouchableWithoutFeedback: 没有任何反馈

// import {TouchableHighlight} from 'react-native';

export default class TouchAbles extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button')
  }

  _onLongPressButton() {
    Alert.alert('You long press the button!')
  }

  render() {
    return (
      <View style = {styles.container}>
        <TouchableHighlight onPress = {this._onPressButton} underlayColor = 'white'>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>

        <TouchableOpacity onPress = {this._onPressButton}>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>

        <TouchableNativeFeedback onPress = {this._onPressButton}
        background = {Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>

        <TouchableWithoutFeedback onPress = {this._onPressButton} onLongPress = {this._onLongPressButton}>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>

        <TouchableHighlight onLongPress = {this._onLongPressButton} onPress = {this._onPressButton}>
          <View style = {styles.button}>
            <Text style = {styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight> 
      </View>
    );
  }
}

const styles = StyleSheet.create ({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },

  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196f3'
  },

  buttonText: {
    padding: 20,
    color: 'white'
  }
})


